<template>
	<view>
		<u-navbar title="我的维修" bgColor="#3083FB" titleStyle="color:#fff" left-icon-color="#fff" :autoBack="true"
			placeholder></u-navbar>
		<view class="bg"></view>
		<view class="main">
			<view class="tab-box">
				<u-tabs :list="[{name:'进行中'},{name:'已完成'}]" lineWidth="60" lineColor="#fff" @click="tabChange"
					:current="current" :activeStyle="{
						color: '#fff',
						fontWeight: 'bold',
						transform: 'scale(1.05)'
					}" :inactiveStyle="{
						color: '#fff',
						transform: 'scale(1)'
					}" :scrollable="false"></u-tabs>
			</view>

			<view class="repair">
				<view class="left">
					<view>维修方式：</view>
					<view class="btn">
						<u-button type="primary" size="small" @click="onMore">
							全部 <u-icon :name="moreIcon" color="#fff" size="16"></u-icon>
						</u-button>

						<view class="more" v-show="showMore">
							<view class="item" @click="selectMore(1)">
								到店维修
							</view>
							<view class="item" @click="selectMore(2)">
								上门取车
							</view>
						</view>
					</view>
				</view>
				<view class="right" @click="showDate = true;">
					<u-icon name="calendar" label="预约日期" size="24"></u-icon>
				</view>
			</view>
			<!-- 进行中 -->
			<view class="ing" v-show="current == 0">
				<view class="item" v-for="(i,index) in 5" :key="index">
					<view>维修单号：<text>3535252</text></view>
					<view>维修方式：<text>到店维修</text></view>
					<view>预约日期：<text>2022/11/10 11:10</text></view>
				</view>
			</view>
			<!-- 已完成 -->
			<view class="done" v-show="current == 1">
				<view class="item">
					<view>维修单号：<text>3535252</text></view>
					<view>维修方式：<text>到店维修</text></view>
					<view>完成日期：<text>2022/11/10 11:10</text></view>
				</view>
			</view>
		</view>

		<!-- 时间范围弹窗 -->
		<u-modal :show="showDate" :zoom="false" closeOnClickOverlay @close="close" :showConfirmButton="false"
			negativeTop="200" width="680rpx">
			<view class="dateBox">
				<view class="item" @click="onShowTimePicker('startTime')">
					<view>开始时间</view>
					<view class="date">{{startTimeDate}}</view>
					<view class="time">{{startTimetime}}</view>
				</view>
				<view class="item" @click="onShowTimePicker('endTime')">
					<view>结束时间</view>
					<view class="date">{{endTimeDate}}</view>
					<view class="time">{{endTimetime}}</view>
				</view>
			</view>
		</u-modal>

		<!-- 查看更多遮罩层 -->
		<view class="mask" v-show="showMore" @click="showMore = !showMore"></view>
		<!-- 时间选择弹窗 -->
		<u-datetime-picker :show="showTimePicker" v-model="dateValue" mode="datetime" closeOnClickOverlay
			@confirm="enterDate" @cancel="closeDatePicker" @close="closeDatePicker"></u-datetime-picker>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				moreIcon: 'arrow-right',
				showMore: false,
				// 0 全部 1 维修 2 取车
				filterListType: 0,
				showDate: false,
				showTimePicker: false,
				dateValue: Number(new Date()),
				// 表示当前是选择哪个时间
				type: '',
				startTime: '',
				endTime: '',
			};
		},
		onLoad() {
			const timeFormat = uni.$u.timeFormat;
			this.startTime = timeFormat(Number(new Date()) - 7 * 1000 * 60 * 60 * 24, 'yyyy年mm月dd日 hh:MM');
			this.endTime = timeFormat(Number(new Date()), 'yyyy年mm月dd日 hh:MM');
		},
		computed: {
			startTimeDate() {
				return this.startTime.split(' ')[0] || '';
			},
			startTimetime() {
				return this.startTime.split(' ')[1] || '';
			},
			endTimeDate() {
				return this.endTime.split(' ')[0] || '';
			},
			endTimetime() {
				return this.endTime.split(' ')[1] || '';
			},
		},
		methods: {
			tabChange(e) {
				this.current = e.index;
			},
			onMore() {
				this.showMore = !this.showMore;
				if (this.showMore) {
					this.moreIcon = 'arrow-down';
				} else {
					this.moreIcon = 'arrow-right';
				}
			},
			selectMore(i) {
				this.onMore();
				this.filterListType = i;
			},
			close() {
				if (this.showTimePicker) {
					return;
				} else {
					this.showDate = false;
				}
			},
			onShowTimePicker(type) {
				this.type = type;
				this.showTimePicker = true;
			},
			closeDatePicker() {
				this.showTimePicker = false;
			},
			enterDate(e) {
				this.result(e.value, e.mode)
				this.showTimePicker = false;
			},
			result(time, mode) {
				const timeFormat = uni.$u.timeFormat;
				this[this.type] = timeFormat(time, 'yyyy年mm月dd日 hh:MM');

			},
		}
	}
</script>

<style lang="scss">
	.mask {
		width: 100%;
		height: 100vh;
		background-color: transparent;
		position: absolute;
		top: 0;
		z-index: 10;
	}

	.bg {
		background-color: #3083FB;
		height: 200rpx;
		margin-top: -2px;
	}

	.main {
		padding: 20rpx;
		padding-top: 30rpx;
		margin-top: -190rpx;

		.tab-box {
			padding: 0 140rpx;
		}

		.repair {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			border-radius: 18rpx;
			padding: 40rpx 20rpx;
			margin-top: 20rpx;

			.left {
				display: flex;
				align-items: center;

				.btn {
					position: relative;
					width: 180rpx;
				}

				.more {
					position: absolute;
					z-index: 15;
					background-color: #fff;
					width: 180rpx;
					text-align: center;
					border-radius: 10rpx;
					box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.2);
					padding: 30rpx;

					.item {
						margin-bottom: 10rpx;

						&:active {
							background-color: #ccc;
						}
					}
				}

			}

		}

		.ing,
		.done {
			// padding: 40rpx 20rpx;
			margin-top: 20rpx;

			.item {
				background-color: #fff;
				padding: 20rpx 20rpx;
				border-radius: 18rpx;

				view {
					font-weight: bold;
					padding: 10rpx 0;
					text{
						font-weight: normal;
						color:#808080;
					}
				}
			}
		}
	}

	/deep/ .u-modal__content {
		padding: 0 !important;
	}

	.dateBox {
		width: 100%;
		display: flex;
		flex-direction: column;
		padding: 30rpx;

		.item {
			display: flex;
			padding: 20rpx 0;
			justify-content: space-around;

			.date,
			.time {
				background-color: #e6e6e6;
				padding: 10rpx;
				border-radius: 30rpx;
			}
		}
	}
</style>